<template>
	<q-search v-model="searchParams" :config="searchConfig" />
</template>
<script setup lang="ts">
	import { ref } from 'vue';
	import $dateFormat from '@q-admin-design-vue/utils/DateFormat';

	const searchForm = [
		{
			componentType: 'text',
			key: 'channelName',
			label: '输入框：',
		},
		{
			componentType: 'select',
			key: 'channelName1',
			label: '选择器：',
			options: [
				{
					value: '1',
					label: '渠道名称1',
				},
			],
		},
		{
			componentType: 'select-v2',
			key: 'channelName2',
			label: '虚拟列表选择器：',
			options: [
				{
					value: '2',
					label: '渠道名称2',
				},
			],
		},
		{
			componentType: 'checkSelect',
			selectAll: true,
			key: 'channelName3',
			label: 'checkBox选择器：',
			options: [
				{
					value: '3',
					label: '渠道名称3',
				},
			],
		},
		{
			componentType: 'cascader',
			key: 'channelName4',
			label: '级联选择器：',
			options: [
				{
					value: '4',
					label: '渠道名称4',
					children: [
						{
							value: '4-1',
							label: '渠道名称4-1',
						},
						{
							value: '4-2',
							label: '渠道名称4-2',
							children: [
								{
									value: '4-2-1',
									label: '渠道名称4-2-1',
								},
							],
						},
					],
				},
			],
		},
		{
			componentType: 'datePicker',
			type: 'year',
			key: '日期',
			label: '日期器：',
		},
		{
			componentType: 'datePicker',
			type: 'datetime',
			key: '日期时间',
			dateFormat: 'YYYY-MM-DD HH:mm:ss',
			label: '日期时间器：',
		},
		{
			componentType: 'dateRangPicker',
			type: 'daterange',
			key: 'channelName7',
			label: '日期区间器：',
			dateFormat: 'YYYY-MM-DD',
			valueFormat: 'x',
			defaultValue: [
				$dateFormat.dateTime(`${$dateFormat.subtractDay(29)}`),
				$dateFormat.dateTime(`${$dateFormat.subtractDay(0)}`),
			],
		},
		{
			componentType: 'dateRangPicker',
			type: 'datetimerange',
			key: 'channelName8',
			label: '日期时间区间器：',
			dateFormat: 'YYYY-MM-DD HH:mm:ss',
			valueFormat: 'x',
			defaultValue: [
				$dateFormat.dateTime(`${$dateFormat.subtractDay(29)} 00:00:00`),
				$dateFormat.dateTime(`${$dateFormat.subtractDay(0)} 23:59:59`),
			],
		},
	];

	const searchParams = ref({});
	const searchConfig = ref({
		labelWidth: 105,
		handlerSearch({ params, type }) {
			/**
			 * params: 搜索项 绑定值
			 * type: 按钮类型 searchForm：搜索按钮  resetForm：重置按钮
			 */
			console.log(params, type);
		},
		// 配置表头内容
		formConfigList: searchForm,
	});
</script>
